<template>
  <div style="padding: 40px">
  
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column type="index" label="通知ID" width="100px" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="userProfile" label="简介" />
      <el-table-column  label="权限" >
        <template #default="scope">
          <el-tag v-if="scope.row.userRole === 'admin'" type="success">管理员</el-tag>
          <el-tag v-else type="warning">普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="头像" >
        <template #default="scope">
          <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.userAvatar"
          fit="cover">
        </el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <el-button style="margin-right:10px ;"  @click="handleEdit(scope.row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination    @current-change="handleCurrentChange"
      :current-page.sync="currentPage" background :page-size="10" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="编辑" width="70%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.userName" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="form.userRole" placeholder="请选择">
            <el-option
              key="admin"
              label="管理员"
              value="admin">
            </el-option>
            <el-option
              key="user"
              label="用户"
              value="user">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介">
            <el-input v-model="form.userProfile" style="width: 50%"></el-input>
          </el-form-item>
        <el-form-item label="疾病史">
          <el-upload
                  action="#"
                  :file-list="fileList"
                  list-type="picture-card"
                  :limit="1"
                  :on-change="handelChange"      
                  :on-exceed="handleExceed"
                  :data="dataList"
                  :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getUserList,getUserDelete,getUserUpdate} from '../../http/user.js'
export default {
  name: "Notice",
  
  data() {
    return {
      form: {
      },
      fileList:[],
      dataList: {},
      dialogVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: '',
      tableData: [],
    }

  },
  created() {
    this.load()
  },

  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
   async  handelChange(file, fileList){

      let formData =  new FormData()
      formData.append("data", file.raw);
      const res = await  getMinioUpload(formData)
      if (res !== '') {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
      this.fileList =  [{name: 'food.jpg', url: res}]
    },
    async load() {
      const { code,  data } = await getUserList({})
      if (code == '0') {
        this.tableData = data.records
        this.total = Number(data.total) 
      }
    },
    add() {
      this.dialogVisible = true
      this.form = {}
    },
    
    // 编辑
    handleEdit(row) {
  
      this.form = { ...row }
      this.fileList =  [{name: 'food.jpg', url: this.form.userAvatar}]
      this.dialogVisible = true
    },
    // 确认修改
    async saveEdit() {
      this.form.userAvatar = this.fileList[0].url
      const { code, message } = await getUserUpdate(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    async handleDelete(id) {
      const { code, message } = await getUserDelete({ id:id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userId: 'user/getUserId'
    })
  }

}
</script>


<style scoped>

</style>